import { useState } from 'react'
import { useStore } from '../store/useStore'
import { toast } from 'react-toastify'
import { exportOrders } from '../utils/storage'

// 材质名称映射
const getMaterialName = (material) => {
  const materialNames = {
    'ceramic': '陶瓷',
    'plastic': '塑料',
    'metal': '金属',
    'wood': '木材',
    'pla': 'PLA塑料',
    'abs': 'ABS塑料',
    'resin': '树脂'
  }
  return materialNames[material] || material || '未知'
}

// 状态名称映射
const getStatusName = (status) => {
  const statusNames = {
    'pending': '待处理',
    'processing': '处理中',
    'completed': '已完成',
    'cancelled': '已取消',
    'shipped': '已发货'
  }
  return statusNames[status] || status
}

export default function OrderList({ isOpen, onClose }) {
  const { orders, cancelOrder } = useStore()
  const [selectedOrder, setSelectedOrder] = useState(null)
  const [searchTerm, setSearchTerm] = useState('')
  const [statusFilter, setStatusFilter] = useState('all')
  const [sortBy, setSortBy] = useState('date-desc')
  const [selectedOrders, setSelectedOrders] = useState(new Set())

  // 筛选和搜索
  const filteredOrders = orders.filter(order => {
    // 状态筛选
    if (statusFilter !== 'all' && order.status !== statusFilter) {
      return false
    }
    
    // 搜索
    if (searchTerm) {
      const term = searchTerm.toLowerCase()
      const material = order.material || order.specifications?.material || ''
      const orderNum = order.id || order.orderNumber || ''
      const price = order.price || order.estimatedPrice || 0
      const modelName = order.modelName || ''
      
      return (
        orderNum.toLowerCase().includes(term) ||
        material.toLowerCase().includes(term) ||
        modelName.toLowerCase().includes(term) ||
        price.toString().includes(term)
      )
    }
    
    return true
  })

  // 排序
  const sortedOrders = [...filteredOrders].sort((a, b) => {
    switch (sortBy) {
      case 'date-desc':
        return new Date(b.createdAt) - new Date(a.createdAt)
      case 'date-asc':
        return new Date(a.createdAt) - new Date(b.createdAt)
      case 'price-desc':
        return (b.price || b.estimatedPrice || 0) - (a.price || a.estimatedPrice || 0)
      case 'price-asc':
        return (a.price || a.estimatedPrice || 0) - (b.price || b.estimatedPrice || 0)
      case 'status':
        return a.status.localeCompare(b.status)
      default:
        return 0
    }
  })

  const handleExportOrders = () => {
    const ordersToExport = selectedOrders.size > 0 
      ? orders.filter(o => selectedOrders.has(o.id))
      : sortedOrders
      
    if (ordersToExport.length === 0) {
      toast.warning('暂无订单可导出')
      return
    }
    
    try {
      exportOrders(ordersToExport)
      toast.success(`已导出 ${ordersToExport.length} 个订单！`)
    } catch (error) {
      toast.error('导出失败：' + error.message)
    }
  }

  // 批量操作
  const handleBatchCancel = () => {
    if (selectedOrders.size === 0) {
      toast.warning('请先选择订单')
      return
    }
    
    if (window.confirm(`确定要取消选中的 ${selectedOrders.size} 个订单吗？`)) {
      selectedOrders.forEach(orderId => {
        const order = orders.find(o => o.id === orderId)
        if (order && order.status === 'pending') {
          cancelOrder(orderId)
        }
      })
      setSelectedOrders(new Set())
      toast.success('批量取消成功！')
    }
  }

  const toggleSelectAll = () => {
    if (selectedOrders.size === sortedOrders.length) {
      setSelectedOrders(new Set())
    } else {
      setSelectedOrders(new Set(sortedOrders.map(o => o.id)))
    }
  }

  const toggleSelectOrder = (orderId) => {
    const newSelected = new Set(selectedOrders)
    if (newSelected.has(orderId)) {
      newSelected.delete(orderId)
    } else {
      newSelected.add(orderId)
    }
    setSelectedOrders(newSelected)
  }

  if (!isOpen) return null

  const handleCancelOrder = (orderId) => {
    if (window.confirm('确定要取消这个订单吗？')) {
      cancelOrder(orderId)
      toast.success('订单已取消！')
      setSelectedOrder(null)
    }
  }

  const getStatusColor = (status) => {
    const colors = {
      pending: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
      processing: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
      completed: 'bg-green-500/20 text-green-400 border-green-500/30',
      cancelled: 'bg-gray-500/20 text-gray-400 border-gray-500/30'
    }
    return colors[status] || colors.pending
  }

  const getStatusText = (status) => {
    const texts = {
      pending: '待处理',
      processing: '生产中',
      completed: '已完成',
      cancelled: '已取消'
    }
    return texts[status] || '未知'
  }

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 animate-fade-in">
      {/* 背景遮罩 */}
      <div 
        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      ></div>

      {/* 订单列表容器 */}
      <div className="relative w-full max-w-4xl max-h-[85vh] glass-effect-dark border border-white/10 rounded-2xl shadow-2xl overflow-hidden animate-scale-in">
        {/* 头部 */}
        <div className="sticky top-0 z-10 glass-effect-dark border-b border-white/10 px-6 py-4">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-2xl font-bold text-white flex items-center space-x-3">
              <svg className="w-8 h-8 text-accent-purple" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
              </svg>
              <span>我的订单</span>
              <span className="text-sm font-normal text-gray-400">
                （共 {orders.length} 个）
              </span>
            </h2>
            
            <button
              onClick={onClose}
              className="w-10 h-10 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 hover:border-red-500/50 text-gray-400 hover:text-red-400 transition-all duration-300 flex items-center justify-center group"
            >
              <svg className="w-5 h-5 group-hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          
          {/* 搜索和筛选工具栏 */}
          {orders.length > 0 && (
            <div className="space-y-3">
              {/* 搜索框 */}
              <div className="relative">
                <input
                  type="text"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  placeholder="搜索订单号、材质、颜色、价格..."
                  className="w-full pl-10 pr-4 py-2 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-accent-purple/50 focus:ring-2 focus:ring-accent-purple/20 transition-all"
                />
                <svg className="w-5 h-5 text-gray-400 absolute left-3 top-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                {searchTerm && (
                  <button
                    onClick={() => setSearchTerm('')}
                    className="absolute right-3 top-2.5 text-gray-400 hover:text-white transition-colors"
                  >
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                )}
              </div>

              {/* 筛选和排序 */}
              <div className="flex flex-wrap items-center gap-2">
                {/* 状态筛选 */}
                <div className="flex items-center space-x-1">
                  {[
                    { value: 'all', label: '全部', icon: '📋' },
                    { value: 'pending', label: '待处理', icon: '⏳' },
                    { value: 'processing', label: '生产中', icon: '⚙️' },
                    { value: 'completed', label: '已完成', icon: '✅' },
                    { value: 'cancelled', label: '已取消', icon: '❌' }
                  ].map(status => (
                    <button
                      key={status.value}
                      onClick={() => setStatusFilter(status.value)}
                      className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
                        statusFilter === status.value
                          ? 'bg-accent-purple text-white'
                          : 'bg-white/5 text-gray-400 hover:bg-white/10 hover:text-white'
                      }`}
                    >
                      <span className="mr-1">{status.icon}</span>
                      {status.label}
                    </button>
                  ))}
                </div>

                {/* 分隔符 */}
                <div className="h-6 w-px bg-white/10"></div>

                {/* 排序 */}
                <select
                  value={sortBy}
                  onChange={(e) => setSortBy(e.target.value)}
                  className="px-3 py-1.5 bg-white/5 border border-white/10 rounded-lg text-sm text-gray-300 focus:outline-none focus:border-accent-blue/50 cursor-pointer hover:bg-white/10 transition-all"
                >
                  <option value="date-desc">最新优先</option>
                  <option value="date-asc">最早优先</option>
                  <option value="price-desc">价格从高到低</option>
                  <option value="price-asc">价格从低到高</option>
                  <option value="status">按状态排序</option>
                </select>

                {/* 批量操作 */}
                {selectedOrders.size > 0 && (
                  <>
                    <div className="h-6 w-px bg-white/10"></div>
                    <span className="text-xs text-gray-400">
                      已选 {selectedOrders.size} 项
                    </span>
                    <button
                      onClick={handleBatchCancel}
                      className="px-3 py-1.5 bg-red-500/10 hover:bg-red-500/20 border border-red-500/30 text-red-400 rounded-lg text-xs font-medium transition-all hover:scale-105"
                    >
                      批量取消
                    </button>
                  </>
                )}

                {/* 导出按钮 */}
                <button
                  onClick={handleExportOrders}
                  className="ml-auto px-3 py-1.5 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-accent-blue/50 text-gray-300 hover:text-white rounded-lg transition-all duration-300 text-xs font-medium flex items-center space-x-1 hover:scale-105"
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                  </svg>
                  <span>导出{selectedOrders.size > 0 ? `（${selectedOrders.size}）` : ''}</span>
                </button>
              </div>

              {/* 结果统计 */}
              <div className="flex items-center justify-between text-xs text-gray-400">
                <div className="flex items-center space-x-2">
                  <svg className="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                  <span>数据已自动保存</span>
                </div>
                <span>
                  显示 {sortedOrders.length} / {orders.length} 个订单
                </span>
              </div>
            </div>
          )}
        </div>

        {/* 订单列表 */}
        <div className="overflow-y-auto max-h-[calc(85vh-280px)] p-6">
          {orders.length === 0 ? (
            // 空状态
            <div className="flex flex-col items-center justify-center py-16">
              <div className="text-8xl mb-6 animate-float">📦</div>
              <p className="text-xl font-semibold text-gray-300 mb-2">暂无订单</p>
              <p className="text-sm text-gray-500">上传图片并生成 3D 模型后即可下单</p>
            </div>
          ) : sortedOrders.length === 0 ? (
            // 无搜索结果
            <div className="flex flex-col items-center justify-center py-16">
              <div className="text-8xl mb-6">🔍</div>
              <p className="text-xl font-semibold text-gray-300 mb-2">未找到匹配的订单</p>
              <p className="text-sm text-gray-500 mb-4">试试调整搜索条件或筛选器</p>
              <button
                onClick={() => {
                  setSearchTerm('')
                  setStatusFilter('all')
                }}
                className="px-4 py-2 bg-accent-purple hover:bg-accent-purple/80 text-white rounded-lg transition-all"
              >
                清除筛选
              </button>
            </div>
          ) : (
            // 订单卡片
            <>
              {/* 全选/取消全选 */}
              {sortedOrders.length > 0 && (
                <div className="mb-4 pb-4 border-b border-white/10">
                  <label className="flex items-center space-x-2 cursor-pointer group">
                    <input
                      type="checkbox"
                      checked={selectedOrders.size === sortedOrders.length && sortedOrders.length > 0}
                      onChange={toggleSelectAll}
                      className="w-4 h-4 rounded border-white/20 bg-white/5 text-accent-purple focus:ring-accent-purple/50 focus:ring-offset-0 cursor-pointer"
                    />
                    <span className="text-sm text-gray-300 group-hover:text-white transition-colors">
                      全选（{sortedOrders.length} 个订单）
                    </span>
                  </label>
                </div>
              )}

              <div className="space-y-4">
              {sortedOrders.map((order, index) => (
                <div
                  key={order.id}
                  className={`glass-effect-dark border rounded-xl p-5 hover:border-accent-purple/30 transition-all duration-300 card-hover animate-slide-up ${
                    selectedOrders.has(order.id) ? 'border-accent-purple/50 bg-accent-purple/5' : 'border-white/10'
                  }`}
                  style={{ animationDelay: `${index * 0.05}s` }}
                >
                  <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    {/* 复选框 */}
                    <div className="flex items-start space-x-3">
                      <input
                        type="checkbox"
                        checked={selectedOrders.has(order.id)}
                        onChange={() => toggleSelectOrder(order.id)}
                        className="mt-1 w-4 h-4 rounded border-white/20 bg-white/5 text-accent-purple focus:ring-accent-purple/50 focus:ring-offset-0 cursor-pointer"
                      />
                    {/* 左侧：订单信息 */}
                    <div className="flex-1">
                      <div className="flex items-center space-x-3 mb-3">
                        <h3 className="text-lg font-bold text-white">
                          {order.modelName || '订单'} #{order.id || order.orderNumber || ''}
                        </h3>
                        <span className={`px-3 py-1 rounded-full text-xs font-semibold border ${getStatusColor(order.status)}`}>
                          {getStatusText(order.status)}
                        </span>
                      </div>

                      <div className="grid grid-cols-2 gap-3 text-sm">
                        <div className="flex items-center space-x-2 text-gray-400">
                          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
                          </svg>
                          <span>{new Date(order.createdAt).toLocaleString('zh-CN')}</span>
                        </div>

                        <div className="flex items-center space-x-2 text-gray-400">
                          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
                          </svg>
                          <span>{getMaterialName(order.material || order.specifications?.material)}</span>
                        </div>

                        <div className="flex items-center space-x-2 text-gray-400">
                          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
                          </svg>
                          <span>订单编号: {order.id}</span>
                        </div>

                        <div className="flex items-center space-x-2 text-accent-purple font-semibold">
                          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
                            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clipRule="evenodd" />
                          </svg>
                          <span>¥{order.price || order.estimatedPrice || 0}</span>
                        </div>
                      </div>
                    </div>

                    {/* 右侧：操作按钮 */}
                    <div className="flex md:flex-col gap-2">
                      <button
                        onClick={() => setSelectedOrder(order)}
                        className="flex-1 md:flex-none px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-accent-blue/50 text-gray-300 hover:text-white rounded-lg transition-all duration-300 text-sm font-medium hover:scale-105"
                      >
                        查看详情
                      </button>
                      
                      {order.status === 'pending' && (
                        <button
                          onClick={() => handleCancelOrder(order.id)}
                          className="flex-1 md:flex-none px-4 py-2 bg-red-500/10 hover:bg-red-500/20 border border-red-500/30 hover:border-red-500/50 text-red-400 hover:text-red-300 rounded-lg transition-all duration-300 text-sm font-medium hover:scale-105"
                        >
                          取消订单
                        </button>
                      )}
                    </div>
                    </div>
                  </div>
                </div>
              ))}
              </div>
            </>
          )}
        </div>
      </div>

      {/* 订单详情弹窗 */}
      {selectedOrder && (
        <OrderDetailModal
          order={selectedOrder}
          onClose={() => setSelectedOrder(null)}
          onCancel={handleCancelOrder}
        />
      )}
    </div>
  )
}

// 订单详情模态框
function OrderDetailModal({ order, onClose, onCancel }) {
  // 状态文本映射（组件内定义）
  const getStatusText = (status) => {
    const texts = {
      pending: '待处理',
      processing: '生产中',
      completed: '已完成',
      cancelled: '已取消'
    }
    return texts[status] || '未知'
  }
  
  // 获取材质中文名
  const getMaterialLabel = (value) => {
    const labels = {
      pla: 'PLA塑料',
      abs: 'ABS塑料',
      resin: '树脂',
      metal: '金属'
    }
    return labels[value] || value
  }
  
  // 获取尺寸中文名
  const getSizeLabel = (value) => {
    const labels = {
      small: '小号(5×5×5cm)',
      medium: '中号(10×10×10cm)',
      large: '大号(15×15×15cm)',
      xlarge: '加大号(20×20×20cm)'
    }
    return labels[value] || value
  }
  
  // 获取颜色中文名
  const getColorLabel = (value) => {
    const labels = {
      white: '白色',
      black: '黑色',
      red: '红色',
      blue: '蓝色',
      green: '绿色',
      gold: '金色'
    }
    return labels[value] || value
  }

  return (
    <div className="absolute inset-0 z-10 flex items-center justify-center p-4 animate-fade-in">
      <div 
        className="absolute inset-0 bg-black/50"
        onClick={onClose}
      ></div>

      <div className="relative w-full max-w-2xl glass-effect-dark border border-white/10 rounded-2xl p-6 animate-scale-in shadow-2xl max-h-[90vh] overflow-y-auto">
        {/* 头部 */}
        <div className="flex items-center justify-between mb-6 sticky top-0 bg-dark-300/95 backdrop-blur-sm pb-4 border-b border-white/10">
          <h3 className="text-xl font-bold text-white flex items-center space-x-2">
            <svg className="w-6 h-6 text-accent-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            <span>订单详情</span>
          </h3>
          
          <button
            onClick={onClose}
            className="w-8 h-8 rounded-lg bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white transition-all group"
          >
            <svg className="w-5 h-5 group-hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* 订单信息 */}
        <div className="space-y-6">
          {/* 基本信息 */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 bg-white/5 rounded-xl border border-white/10">
            <div>
              <p className="text-xs text-gray-500 mb-1">订单编号</p>
              <p className="text-sm font-semibold text-white">{order.id || order.orderNumber || '无'}</p>
            </div>
            <div>
              <p className="text-xs text-gray-500 mb-1">订单状态</p>
              <p className="text-sm font-semibold text-accent-purple">{getStatusText(order.status)}</p>
            </div>
            <div>
              <p className="text-xs text-gray-500 mb-1">下单时间</p>
              <p className="text-sm font-semibold text-white">
                {new Date(order.createdAt).toLocaleString('zh-CN')}
              </p>
            </div>
            <div>
              <p className="text-xs text-gray-500 mb-1">订单金额</p>
              <p className="text-sm font-semibold text-accent-purple">¥{order.estimatedPrice}</p>
            </div>
          </div>

          {/* 商品规格 */}
          <div className="p-4 bg-white/5 rounded-xl border border-white/10">
            <h4 className="text-sm font-semibold text-gray-300 mb-3 flex items-center space-x-2">
              <svg className="w-4 h-4 text-accent-blue" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z" clipRule="evenodd" />
              </svg>
              <span>商品规格</span>
            </h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
              <div className="flex justify-between p-2 bg-white/5 rounded-lg">
                <span className="text-gray-400">材质：</span>
                <span className="text-white font-medium">{getMaterialName(order.material || order.specifications?.material)}</span>
              </div>
              <div className="flex justify-between p-2 bg-white/5 rounded-lg">
                <span className="text-gray-400">模型名称：</span>
                <span className="text-white font-medium">{order.modelName || '未命名'}</span>
              </div>
              <div className="flex justify-between p-2 bg-white/5 rounded-lg">
                <span className="text-gray-400">状态：</span>
                <span className="text-white font-medium">{getStatusName(order.status)}</span>
              </div>
              <div className="flex justify-between p-2 bg-white/5 rounded-lg">
                <span className="text-gray-400">价格：</span>
                <span className="text-white font-medium">¥{order.price || order.estimatedPrice || 0}</span>
              </div>
            </div>
          </div>

          {/* 3D 模型预览 */}
          {order.modelUrl && (
            <div className="p-4 bg-white/5 rounded-xl border border-white/10">
              <h4 className="text-sm font-semibold text-gray-300 mb-3">3D 模型</h4>
              <div className="aspect-video bg-dark-400/50 rounded-lg flex items-center justify-center">
                <p className="text-gray-500 text-sm">3D 模型缩略图</p>
              </div>
            </div>
          )}

          {/* 操作按钮 */}
          <div className="flex flex-col md:flex-row gap-3 pt-4 border-t border-white/10">
            <button
              onClick={onClose}
              className="flex-1 px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 text-white rounded-lg transition-all duration-300 font-semibold hover:scale-105"
            >
              关闭
            </button>
            
            {order.status === 'pending' && (
              <button
                onClick={() => {
                  onCancel(order.id)
                  onClose()
                }}
                className="flex-1 px-6 py-3 bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white rounded-lg transition-all duration-300 font-semibold shadow-lg shadow-red-500/50 hover:shadow-xl hover:scale-105"
              >
                取消订单
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

